<template>
  <view style="background: rgb(247, 247, 248)">
    <view class="topcontent">
      <view
        style="display: flex; align-items: center; justify-content: flex-start"
      >
        <view class="title">济南</view>
        <view class="searchContent" @click="showSearchLocation"
          >搜索目的地</view
        >
      </view>
      <view class="title-barnner">
        <!-- </image> -->
        <image
          src="/static/home/titleName.png"
          style="height: 100%; width: 450rpx"
        ></image>
      </view>
      <view class="title-remark">
        <image
          src="/static/home/titleRemark.png"
          style="height: 100%; width: 100%"
        >
        </image>
      </view>

      <!-- <p class="tit1">泊豆泊车-网约停车旗舰平台</p>
			<p class="tit2">停车套餐团购、预约车位、出租求租、车位买卖</p> -->
    </view>

    <view class="centContent">
      <view class="centContent-item-top">
        <view
          class="centContent-item"
          @click="goToParkingPackages"
          style="border-top-left-radius: 10rpx"
        >
          <image
            src="../../static/tingchetaocan.png"
            alt=""
            style="
              position: absolute;
              bottom: 10rpx;
              right: 10rpx;
              width: 80rpx;
              height: 80rpx;
              
            "
          />
          <p class="topTitle">停车套餐</p>
          <p class="topDesc">购买套餐，便捷实惠</p>
        </view>
        <view
          class="centContent-item"
          @click="goToBookParkingPlace"
        >
          <image
            src="../../static/yudingchewei.png"
            alt=""
            style="
              position: absolute;
              bottom: 10rpx;
              right: 10rpx;
              width: 80rpx;
              height: 80rpx;
            "
          />
          <p class="topTitle">预定泊位</p>
          <p class="topDesc">提前预定、停车无忧</p>
        </view>
        <view
          class="centContent-item"
          @click="goToRentalInfoCar"
          style="border-top-right-radius: 10rpx"
        >
          <image
            src="../../static/yudingchewei.png"
            alt=""
            style="
              position: absolute;
              bottom: 10rpx;
              right: 10rpx;
              width: 80rpx;
              height: 80rpx;
            "
          />
          <p class="topTitle">车位数字资产</p>
          <p class="topDesc">完善车位数字资产</p>
        </view>
      </view>
      <view class="centContent-item-bottom">
        <view
          class="centContent-item"
          @click="goToRentalInfo"
          style="border-bottom-left-radius: 10rpx"
        >
          <image
            src="../../static/chuzuqiuzu.png"
            alt=""
            style="
              position: absolute;
              bottom: 10rpx;
              right: 10rpx;
              width: 80rpx;
              height: 80rpx;
            "
          />
          <p class="topTitle">出租求租</p>
          <p class="topDesc">空闲车位，等你来租</p>
        </view>
        <view class="centContent-item" @click="goToParkingTrade">
          <image
            src="../../static/chweimaimai.png"
            alt=""
            style="
              position: absolute;
              bottom: 10rpx;
              right: 10rpx;
              width: 80rpx;
              height: 80rpx;
            "
          />
          <p class="topTitle">泊位交易</p>
          <p class="topDesc">停车有位，幸福加倍</p>
        </view>
        <view
          class="centContent-item"
          @click="goToParkingJoin"
          style="border-bottom-right-radius: 10rpx"
        >
          <image
            src="../../static/chechangjianmeng.png"
            alt=""
            style="
              position: absolute;
              bottom: 10rpx;
              right: 10rpx;
              width: 80rpx;
              height: 80rpx;
            "
          />
          <p class="topTitle">资产方加盟</p>
          <p class="topDesc">临停比价、提前预定</p>
        </view>
      </view>
    </view>

    <view class="parkingRecommend">
      <view class="recommend-header">
        <text style="font-weight: bold;">停车套餐推荐</text>
        <text class="more" @click="goToParkingPackages">更多优惠车场 ></text>
      </view>

      <view
        class="parking-item"
        v-for="item in everyList"
        :key="item.id"
        @click="handleParkingDetail(item.id)"
      >
        <view class="parking-info">
          <image
            class="parking-img"
            :src="item.imagePath || '/static/parking-placeholder.png'"
          ></image>
          <view class="parking-detail">
            <view style="display: flex; justify-content: space-between">
              <text class="parking-name">{{ item.name }}</text>
              <text class="muchNum">{{ item.packageNumber }}个在售套餐</text>
            </view>
            <text class="parking-address">{{ item.detailedAddress }}</text>
            <view class="parking-tags">
              <text class="tag">距您{{ item.distance.toFixed(1) }}公里</text>
              <text class="tag">小程序专属优惠</text>
            </view>

            <view class="parking-prices">
              <view
                class="price-item"
                v-for="pkg in item.packageList"
                :key="pkg.id"
              >
                <view style="display: flex; align-items: center">
                  <image
                    src="../../static/taocan.png"
                    alt=""
                    style="width: 40rpx; height: 40rpx; margin-right: 10rpx"
                  />
                  <text>{{ getPkgTypeText(pkg.packageType) }}</text>
                </view>
                <text class="price">¥{{ pkg.packagePrice }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="business-cooperation">
      <view class="cooperation-header">招商加盟</view>
      <view class="cooperation-content" @click="goToParkingJoin">
        <image
          src="../../static/zahpshangjiameng.png"
          alt=""
          style="width: 100%; height: 100%"
        ></image>
        <!-- <text class="cooperation-title">车场加盟</text>
				<text class="cooperation-desc">共享万亿车位停车红利！</text> -->
      </view>
    </view>

    <!-- <u-popup :show="showAddMemory" @close="showAddClose" mode="center" round="10">
			<addMemory @showAddClose="showAddClose" @getList="getList"></addMemory>
		</u-popup> -->

    <!-- <u-popup :show="deleteState" @close="deleteClose" mode="center" round="10" :safeAreaInsetBottom="false">
			<div style="width: 300rpx; height: 300rpx;padding: 50rpx;box-sizing: border-box;">
				<view style="margin-top: 65rpx;">
					<u-button text="确认删除?" shape="circle" @click="deleteMemory" color="#d7000f">
					</u-button>
				</view>
			</div>
		</u-popup> -->

    <!-- Uview的提示信息 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      everyList: [],
      showAddMemory: false,
      deleteState: false,
      deleteId: "",
    };
  },
  onShow() {
    this.getList();
  },
  methods: {
    handleParkingDetail(id) {
      uni.setStorageSync("parkingCarId", id);
      uni.navigateTo({
        url: `/pages/index/parking-packages/details?id=${id}`,
      });
    },
    showSearchLocation() {
      wx.vibrateShort({
        type: "medium",
      });
    },
    getList() {
      console.log(uni.getStorageSync("token"));
      this.$httpReq
        .queryPageRecommend({
          lat: 117.147474,
          lon: 36.659985,
          name: "",
          packageType: "",
        })
        .then((res) => {
          console.log(res);
          // 只显示前三个
          this.everyList = res.data.slice(0, 3);
        });
    },
    // 完成备忘录
    finshMemory(id) {
      wx.vibrateShort({
        type: "medium",
      });
      this.$httpReq
        .finish({
          id: id,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$refs.uToast.show({
              type: "success",
              title: "提交成功",
              message: "提交成功",
              isTab: true, // 是否是tabbar的页面
            });
            this.getList();
          } else {
            this.$refs.uToast.show({
              type: "error",
              title: "提交失败",
              message: "提交失败",
              isTab: true, // 是否是tabbar的页面
            });
          }
        });
    },
    // 删除备忘录
    deleteMemory() {
      wx.vibrateShort({
        type: "medium",
      });
      this.$httpReq
        .deleteMemory({
          id: this.deleteId,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$refs.uToast.show({
              type: "success",
              title: "提交成功",
              message: "提交成功",
              isTab: true, // 是否是tabbar的页面
            });
            this.deleteClose();
            this.getList();
          } else {
            this.deleteClose();
            this.$refs.uToast.show({
              type: "error",
              title: "提交失败",
              message: "提交失败",
              isTab: true, // 是否是tabbar的页面
            });
          }
        });
    },
    showAddClose() {
      this.showAddMemory = false;
    },
    showDelete(id) {
      wx.vibrateShort({
        type: "medium",
      });
      this.deleteId = id;
      this.deleteState = true;
    },
    deleteClose() {
      this.deleteState = false;
    },
    showAdd() {
      wx.vibrateShort({
        type: "medium",
      });
      this.showAddMemory = true;
    },

    goToParkingPackages() {
      wx.vibrateShort({
        type: "medium",
      });
      uni.navigateTo({
        url: "/pages/index/parking-packages/index",
      });
    },
    goToBookParkingPlace() {
      wx.vibrateShort({
        type: "medium",
      });
      uni.navigateTo({
        url: "/pages/index/bookParkingPlace/index",
      });
    },
    goToRentalInfoCar() {
      wx.vibrateShort({
        type: "medium",
      });
      uni.showToast({
        title: "暂未上线",
        icon: "none",
      });
    },
    goToRentalInfo() {
      wx.vibrateShort({
        type: "medium",
      });
      uni.navigateTo({
        url: "/pages/user/rental-info?type=All&messageType=chuzuqiuzu",
      });
    },
    goToParkingTrade() {
      wx.vibrateShort({
        type: "medium",
      });
      uni.navigateTo({
        url: "/pages/user/parking-trade?type=All&messageType=cheweimaibai",
      });
    },
    goToParkingJoin() {
      wx.vibrateShort({
        type: "medium",
      });
      uni.navigateTo({
        url: "/pages/user/userJoinParking",
      });
    },
    getPkgTypeText(type) {
      // MORNING,AFTERNOON,NIGHT,ALL_DAY
      const typeMap = {
        MORNING: "上午套餐",
        AFTERNOON: "下午套餐",
        NIGHT: "夜间套餐",
        ALL_DAY: "全天套餐",
      };
      return typeMap[type] || type;
    },
  },
};
</script>

<style lang="scss" scoped>
.topcontent {
  width: 100%;
  /* 设置宽度为100%，占满父容器的宽度 */
  padding: 20rpx;
  /* 设置内边距为20rpx，适用于小程序或移动端开发 */
  box-sizing: border-box;
  /* 确保内边距和边框包含在宽度内 */
  text-align: center;
  background-size: cover;
  background-position: center;
  height: 580rpx;
  /* 文本内容居中对齐 */
  background-image: url("http://123.57.224.37/uploadDir/1739952962677.jpg");
  /* 设置背景图像 */
  padding-top: 100rpx;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 设置顶部内边距为100rpx */
  .title {
    width: 20%;
    text-align: center;
    font-size: 30rpx;
    color: #ffffff;
  }

  .searchContent {
    width: 53%;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 24rpx;
    color: #fff;
    border-radius: 20rpx;
    border: 2rpx solid #fff;
    padding: 0 20rpx;
    box-sizing: border-box;
    text-align: left;
    background: rgba(255, 255, 255, 0);

    &::active {
      opacity: 0.8;
    }
  }

  .title-barnner {
    width: 500rpx;
    height: 220rpx;
    margin-top: 40rpx;
  }

  .title-remark {
    margin-top: 20rpx;
    height: 100rpx;
    width: 500rpx;
  }

  .tit1 {
    font-size: 44rpx;
    color: #333;
    font-weight: bold;
    margin-top: 30rpx;
  }

  .tit2 {
    font-size: 28rpx;
    color: #666;
    margin-top: 20rpx;
    margin-bottom: 50rpx;
  }
}

.centContent {
  padding: 30rpx;
  box-sizing: border-box;
  background: #fff;

  .centContent-item-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .centContent-item {
      width: 32%;
      height: 150rpx;
      background: #fff1e5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: left;
      padding-left: 5rpx;
      position: relative;
      text-indent: 10rpx;

      .topTitle {
        width: 100%;
        font-size: 26rpx;
        color: #000000;
        z-index: 99;
      }

      .topDesc {
        width: 100%;
        font-size: 18rpx;
        color: #000000;
        z-index: 99;
      }
    }
  }

  .centContent-item-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;

    .centContent-item {
      width: 32%;
      height: 150rpx;
      background: #d9faf1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: left;
      padding-left: 5rpx;
      position: relative;
      text-indent: 10rpx;

      .topTitle {
        width: 100%;
        font-size: 26rpx;
        color: #000000;
        z-index: 1s;
      }

      .topDesc {
        width: 100%;
        font-size: 18rpx;
        color: #000000;
        z-index: 1;
      }
    }
  }
}

.parkingRecommend {
  margin-top: 20rpx;
  padding: 30rpx;

  .recommend-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    font-size: 32rpx;

    .more {
      color: #666;
      font-size: 26rpx;
    }
  }

  .parking-item {
    margin-bottom: 30rpx;
    padding: 20rpx;
    background: #ffffff;
    border-radius: 12rpx;

    .parking-info {
      display: flex;
      margin-bottom: 20rpx;

      .parking-img {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        background: #eee;
        border-radius: 8rpx;
      }

      .parking-detail {
        flex: 1;

        .parking-name {
          display: block;
          font-size: 30rpx;
          font-weight: 500;
          margin-bottom: 10rpx;
        }

        .muchNum {
          font-size: 24rpx;
          color: #ffaa00;
        }

        .parking-address {
          display: block;
          font-size: 26rpx;
          color: #666;
          margin-bottom: 10rpx;
        }

        .parking-tags {
          .tag {
            display: inline-block;
            font-size: 24rpx;
            color: #ff7d2d;
            background: #fff4e5;
            padding: 4rpx 12rpx;
            margin-right: 10rpx;
            border-radius: 4rpx;
          }
        }

        .parking-prices {
          .price-item {
            display: flex;
            justify-content: space-between;
            text-align: center;
            font-size: 26rpx;
            color: #666;
            height: 50rpx;
            line-height: 50rpx;

            .price {
              display: block;
              color: #f56c6c;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}

.business-cooperation {
  margin-top: 20rpx;
  padding: 30rpx;
  background: #f7f7f7;

  .cooperation-header {
    font-size: 32rpx;
    margin-bottom: 20rpx;
  }

  .cooperation-content {
    width: 100%;
    height: 230rpx;
    background: #e1e1e1;
    border-radius: 12rpx;

    .cooperation-title {
      display: block;
      font-size: 30rpx;
      font-weight: 500;
      margin-bottom: 10rpx;
    }

    .cooperation-desc {
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>